<template>
  <div class="bmiContent">
    <el-card>
      <el-page-header @back="router.back()">
        <template #content>
          <span class="text-large font-600 mr-3" style="color: #fff;"> {{ route.query.title }} </span>
        </template>
      </el-page-header>
    </el-card>
    <div class="bmiMain">
      <el-card style="background: black;">
        <div class="content">
          <div class="top">
            <div class="title">
              <h1>BMI</h1>
              <h1>计算器</h1>
              <el-icon style="font-weight: 900px;font-size: 80px;">
                <Iphone />
              </el-icon>
            </div>
            <el-form label-width="80px" style="flex: 1;padding-right: 10px;margin-bottom: 20px;color: #e59637;">
              <el-form-item label="" prop="content" style="margin-top: 15px;">
                <span>身高 cm：</span>
              </el-form-item>
              <el-form-item label="" prop="content">
                <el-input show-word-limit v-model="bmiHeight" type="number" placeholder="请输入身高" maxlength="3" style="width: 200px;height: 40px;border-radius: 8px;" />
              </el-form-item>
              <el-form-item label="" prop="content" style="margin-top: 10px;">
                <span>体重 kg：</span>
              </el-form-item>
              <el-form-item label="" prop="content">
                <el-input show-word-limit v-model="bmiWidth" type="number" placeholder="请输入体重" maxlength="3" style="width: 200px;height: 40px;" />
              </el-form-item>
            </el-form>
            <div class="foot">
              <el-button type="primary" class="btn" style="margin-bottom: 20px;" @click="onturn" circle>
                计算
              </el-button>
              <el-button type="danger" class="btn" style="margin-left: 0;" @click="clean" circle>
                重置
              </el-button>
            </div>
          </div>
          <div class="bottom">
            <el-form label-width="80px" style="flex: 1;padding-right: 10px;margin-bottom: 20px;">
              <el-form-item label="" prop="content" style="margin-top: 15px;">
                <span style="color: black;font-weight: 700;font-size: 20px;">计算结果：</span>
              </el-form-item>
              <el-form-item label="" prop="content" style="margin-top: 10px;">
                <el-input v-model="bmiResult" placeholder="计算结果" style="width: 80%;height: 50px;font-size: 18px;" disabled />
                <el-icon style="font-size: 80px;color: #409EFF;" v-if="primary">
                  <WarnTriangleFilled />
                </el-icon>
                <el-icon style="font-size: 80px;color: #E6A23C;" v-if="warning">
                  <WarnTriangleFilled />
                </el-icon>
                <el-icon style="font-size: 80px;color: #F56C6C;" v-if="danger">
                  <WarnTriangleFilled />
                </el-icon>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'


const route = useRoute()
const router = useRouter()

const bmiWidth = ref<any>('')
const bmiHeight = ref<any>('')
const bmiResult = ref<any>('')

const primary = ref<boolean>(false)
const warning = ref<boolean>(false)
const danger = ref<boolean>(false)

const onturn = () => {
  if (bmiWidth.value == '' || bmiHeight.value == '') {
    ElMessage({
      type: 'warning',
      message: '请输入身高或者体重！'
    })
  } else {
    ElMessageBox.confirm('确定要开始计算吗？', '提示', {
    type: 'warning',
    confirmButtonText: '确定',
    showClose: false,
    closeOnClickModal: false,
  })
    .then(() => {
      // BMI = 体重 / (身高 * 身高) 体重kg除以身高m的平方
      const result: any = (
        Number(bmiWidth.value) / ((Number(bmiHeight.value) / 100) * (Number(bmiHeight.value) / 100))
      ).toFixed(1) // toFixed 是将BMI值四舍五入且保留一位小数
      if (result < 18.5) {
        bmiResult.value = `BMI值为：${result}，你的身体状况：过瘦`
        primary.value = false
        warning.value = false
        danger.value = true
      } else if (result >= 18.5 && result <= 20) {
        bmiResult.value = `BMI值为：${result}，你的身体状况：偏瘦`
        primary.value = true
        warning.value = false
        danger.value = false
      } else if (result >= 20 && result <= 23.9) {
        bmiResult.value = `BMI值为：${result}，你的身体状况：标准`
        primary.value = false
        warning.value = false
        danger.value = false
      } else if (result >= 24 && result < 28) {
        bmiResult.value = `BMI值为：${result}，你的身体状况：过重`
        primary.value = false
        warning.value = true
        danger.value = false
      } else if (result >= 28 && result < 32) {
        bmiResult.value = `BMI值为：${result}，你的身体状况：肥胖`
        primary.value = false
        warning.value = false
        danger.value = true
      } else {
        bmiResult.value = `BMI值为：${result}，你的身体状况：严重肥胖`
        primary.value = false
        warning.value = false
        danger.value = true
      }
    })
  }
}


const clean = () => {
  bmiWidth.value = ''
  bmiHeight.value = ''
  bmiResult.value = ''
  primary.value = false
  warning.value = false
  danger.value = false
}

onMounted(() => {

})

</script>

<style lang="scss" scoped>
.bmiContent {
  width: 100%;

  .el-card {
    border-radius: $base-card-border-radius;
  }

  .bmiMain {
    margin-top: 20px;
    padding: 20px;

    .el-card {
      border-radius: 16px;
      box-shadow: 0px 4px 18px 0px rgba(248,216,82, 0.9);

      .content {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        .top {
          flex: 1;
          margin-bottom: 20px;
          display: flex;
          flex-direction: row;

          :deep(.el-input__wrapper) {
            width: 200px;
            height: 40px;
            border: 1px solid #e59637;
            border-radius: 12px;
          }

          
          .title {
            flex: 1;
            color: #e59637;
            font-weight: 900;
            font-size: 23px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            h1 {
              margin-bottom: 10px;
            }
          }
          .foot {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            .btn {
              width: 80px;
              height: 80px;
              font-size: 18px;
              font-weight: 700;
              background-color: #e59637;
              border: 1px solid #e59637;
              color: black;
            }
            .btn :hover {
              font-size: 22px;
            }
          }
        }
        .bottom {
          flex: 1;
          background-color: #eeeeee;
          padding: 30px 0;
          border-radius: 0 0 $base-card-border-radius $base-card-border-radius;
          :deep(.el-input__wrapper) {
            border: none;
            background-color: #FFFFFF;
            border-radius: 8px;
          }
        }
      }
    }
  }

}
</style>